<!DOCTYPE html>
<html>
<head>
	<title>
		同城易
	</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.min.css">
	<script type="text/javascript" src='__PUBLIC__/js/jquery-3.1.1.min.js'></script>
	<script type="text/javascript" src='__PUBLIC__/js/bootstrap.min.js'></script>
	
	<style type="text/css">
	     body{
	     	background-color: rgb(238,239,241);
	     }
		.container-fluid{
			padding-left: 75px;
			background-color: rgb(238,239,241);
		}
		#logo{
         width: 100%;
         height: 93px;
         background-color: white;
         margin-top: -20px;
		}
		#logo img{
			height: 80px;
			margin-top: 0px;
			margin-left: 50px;
			float: left;
		}
		#logo_upload{
			float: right;
			width: 260px;
			height: 45px;
			background-color: rgb(255,68,102);
			text-align: center;
			color: white;
			font-size: 18px;
			line-height: 45px;
			margin-top: 20px;
			margin-right: 100px;
			cursor: pointer;
		}
		#logo_search{
          margin-left: 450px;
		}


		#option{
			width: 85%;
			height: 120px;
			margin: 30px auto;
			background-color: white;
			padding-top: 20px;
			
		}
		.option_ul{
			list-style-type: none;
           height: 40px;
           margin-left: -40px;
		}
		.option_ul li{
			float: left;
			margin-left: 60px;
			font-size: 20px;
            cursor: pointer;
		}
       
        #daohang{
        	width: 85%;
        	height: 80px;
        	margin: 5px auto;

        }
        #daohang ul li a{
        	cursor: pointer;
        }
        #show{
        	width: 100%;
        	height: 800px;
        	margin: 5px auto;
        }
        #show iframe{
        	width: 100%;
        	height: 8000px;
        	border: 0px solid black;
        }
        #myTab li{
		margin-left: 265px;
	}


	.product{
        	width: 85%;
        	height: 130px;
        	background-color: white;
        	margin: 10px auto;
        	padding: 20px;
        	float: left;
        	margin-left: 100px;
        	cursor: pointer;
        }
        .page{
            width: 85%;
        	height: 20px;
        	background-color: white;
        	margin: 10px auto;
        	padding: 20px;
        	float: left;
        	margin-left: 100px;
        }
        .product img{
        	width: 150px;
        	height: 100px;
        	float: left;

        }
        .product ul{
        	list-style-type: none;
        	margin-left: 120px;
        	margin-top: -12px;
        }
        .product ul li{
        	margin-top: 10px;
        }
        .product ul li label{
            font-size: 22px;
            font-weight: bold;
        }
        .info{
        	color: rgb(153,153,153);
        }
        #tips{
        	width: 16%;
        	height: 200px;
        	float: right;
        	background-color: white;
        	margin-right: 40px;
        	margin-top: 10px;
        	
        }
        #tips img{
        	width: 100%;
        	height: 200px;
        }
        
       .qiugou_content{
            width: 85%;
            height: 60px;
            background-color: white;
            margin: 5px auto;
        }
        .qiugou_content ul{
            list-style-type: none;
        }
        .qiugou_content ul li{
            float: left;
            
        }
        .qiugou_content ul li span a{
            font-size: 22px;
            float: left;

            line-height: 60px;
            font-weight: 600;
            text-decoration: none;
        }
        .qiugou_content ul li span a:hover{
           color: rgb(255,68,102);
           text-decoration: underline;
        }
        .qiugou_content ul li div{
            border: 1px solid black;
            margin-top: 18px;
            float: left;
           margin-left: 20px;
        }
        .price{
            font-weight: bold;
            color: rgb(255,68,102);
            margin-left: 200px;
            margin-top: 15px;
            font-size: 24px;
        }
        .area{
            color: rgb(193,168,153);
            
            margin-left: 200px;
            margin-top: 20px;
            font-size: 18px;
        }
        .date{
            
            color: rgb(193,168,153);
            margin-left: 200px;
            margin-top: 20px;
            font-size: 18px;
        }
         .row{
            width: 85%;
            margin: 5px auto;
        }
        .pages a,.pages span {
    display:inline-block;
    padding:2px 5px;
    margin:0 1px;
    border:1px solid #f0f0f0;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
.pages a,.pages li {
    display:inline-block;
    list-style: none;
    text-decoration:none; color:#58A0D3;
}
.pages a.first,.pages a.prev,.pages a.next,.pages a.end{
    margin:0;
}
.pages a:hover{
    border-color:#50A8E6;
}
.pages span.current{
    background:#50A8E6;
    color:#FFF;
    font-weight:700;
    border-color:#50A8E6;
}
#exchange_img{
    width: 248px;
    height: 200px;
}

	</style>
</head>
<body>
<!--头顶开始 -->
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
        <div class="navbar-header"> 
            <a class="navbar-brand" href="#">同城二手交易平台</a> 
        </div> 
    <ul class="nav navbar-nav navbar-right">  
    <li><a href="{:U('Admin/index/index')}"><span class="glyphicon glyphicon-home">&nbsp;后台管理</span></a></li>
    <empty name='user'>
			<li><a href="index.php/Home/user"><span class="glyphicon glyphicon-log-in">&nbsp;</span>登录</a></li>
			<else />
			<li><a href="index.php/Home/index/logout"><span class="glyphicon glyphicon-log-in">&nbsp;</span>注销{$user}</a></li>
    </empty>
    <empty name='user'>
            <li>
            <a href="index.php/home/user"><span class="glyphicon glyphicon-user">&nbsp;</span>注册</a>
            </li>
            <else />
           <li> <a href="#"><span class="glyphicon glyphicon-user">&nbsp;</span>注册</a></li>
      </empty>
        </ul> 
    </div> 
</nav>
<!-- 头顶结束-->
<!-- logo开始-->
<div id="logo">
	<img src="__PUBLIC__/images/logo.png">
	<div id="logo_search">
	<form class="bs-example bs-example-form" role="form" action="index.php/home/index/search" method="post">
	            <div class="col-lg-6" style="margin-top: 25px;">
	                <div class="input-group">
	                    <input type="text" class="form-control" placeholder="搜索您想要的物件" name="want">
	                    <span class="input-group-btn">
	                        <button class="btn btn-default" type="submit">搜索</button>
	                    </span>
	                </div>
	            </div>
	    </form>
	   </div> 
		 <div id="logo_upload">
		 <empty name='user'>
			<a href="#" style="text-decoration: none;color: white;" id="no">免费发布二手信息</a>
			<script type="text/javascript">
				$('#no').click(function(){
					alert('请登录');
				})
			</script>
			<else />
			<a href="index.php/home/publish" style="text-decoration: none;color: white;">免费发布二手信息</a>
    </empty>	
		</div> 
</div>
<script type="text/javascript">
	$('#logo_upload').hover(function(){
        $(this).css('background-color','rgb(226,39,84)');
	},function(){
       $(this).css('background-color',' rgb(255,68,102)');
	})
</script>
<!-- logo结束-->
<!-- 查询条件开始-->
<div id="option">
<ul class="option_ul" id="kind">
		<li><label>种类</label></li>
	<li><a href="index.php/home/index/digital/?kind=0">不限</a></li>	
	<li><a href="index.php/home/index/digital/?kind=1">数码产品</a></li>	
	<li><a href="index.php/home/index/digital/?kind=2">家用电器</a></li>
	<li><a href="index.php/home/index/digital/?kind=3">二手车</a></li>
	<li><a href="index.php/home/index/digital/?kind=4">图书音像</a></li>
	<li><a href="index.php/home/index/digital/?kind=5">工艺收藏</a></li>
	<li><a href="index.php/home/index/digital/?kind=6">乐器运动</a></li>  
		</ul>	
<ul class="option_ul" style="float: left" id="area">
		<li><label>地区</label></li>
		    <li>
				<a href="index.php/home/index/area/?local=0">全石家庄</a>
			</li>
		    <li>
				<a href="index.php/home/index/area/?local=1">桥西区</a>
			</li>
			<li>
				<a href="index.php/home/index/area/?local=2">裕华区</a>
			</li>
			<li>
				<a href="index.php/home/index/area/?local=3">长安区</a>
			</li>
			<li>
				<a href="index.php/home/index/area/?local=4">桥东区</a>
			</li>
			<li>
				<a href="index.php/home/index/area/?local=5">新华区</a>
			</li>
			<li>
			    <a href="index.php/home/index/area/?local=6">正定区</a>
			</li>
		</ul>	
</div>
<!-- 查询条件结束-->
<!--Tab-->
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#ershou" data-toggle="tab">
            二手精品
        </a>
    </li>
    <li>
         <a href="#qiugou" data-toggle="tab">求购信息
        </a>
    </li>
    <li>
         <a href="#exchange" data-toggle="tab">以物换物
        </a>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
 <!--二手精品-->
    <div class="tab-pane fade in active" id="ershou">

    <foreach name='data' item='val'>
 <div class="product" id="pre">
	<img src="__PUBLIC__/{$val.url}">
	<a href="index.php/home/index/detail?id={$val.id}" style="text-decoration: none;">
	<ul>
		<li><label>{$val.desc}</label>
        <div style="border: 1px solid gray;float: left;color: gray" id="zhonglei">{$val.kind}</div>
<div style="font-size: 22px;color: red;font-weight: bold;float: right;" id="jiage">{$val.price}</div></li>
		<li class="info" id="diqu">{$val.area}</li>
		<li class="info" id="yonghuming">{$val.user}/{$val.createtime|date='y-m-d',###}</li>
	</ul>
	</a>
</div>
    </foreach>
    
    </div>
    <!--二手精品-->
    <!--求购信息-->
    <div class="tab-pane fade" id="qiugou">
     <foreach name='qiugou_data' item='qiugou_val'>
      <div class="qiugou_content">
        <ul>
            <li><span><a href="index.php/home/index/qiugou?id={$qiugou_val.id}">{$qiugou_val.desc}</a></span><div>{$qiugou_val.kind}</div></li>
            <li class="price">{$qiugou_val.price}</li>
            <li class="area">{$qiugou_val.area}</li>
            <li class="date">{$qiugou_val.createtime|date='y-m-d',###}</li>
        </ul>
    </div>
    </foreach>
    </div>
    <!--求购信息-->

    <!--以物换物-->
    <div class="tab-pane fade" id="exchange">
        <div class="row">
            <foreach name="exchange_data" item="exchange_val">
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img src="{$exchange_val.url}"
                             alt="通用的占位符缩略图" id="exchange_img">
                        <div class="caption">
                            <h3>换品：{$exchange_val.desc}</h3>
                            <p>我想换：{$exchange_val.product}</p>
                            <p>时间：{$exchange_val.createtime|date='y-m-d',###}</p>
                            <p>类别：{$exchange_val.kind}</p>
                            <p>地区：{$exchange_val.area}</p>
                            <p>
                                <a href="index.php/home/index/jiaohuan?id={$exchange_val.id}" class="btn btn-primary" role="button">
                                    去看看
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </foreach>
</div>
    <!--以物换物-->
    </div>
    </div>
<!--Tab-->
</body>
</html>
<script type="text/javascript">
    $(".qiugou_content").hover(function(){
        $(this).css('background-color','rgb(252,252,252)');
    },function(){
            $(this).css('background-color','white');
    })
</script>
